<template>
	<view>
		<view class="main">
			<text class="frame"></text>
			<text class="amount">提现金额<text class="symbolxin">*</text></text>
			<view class="moneyBox">
				<view class="surplusBox">
					<text class="surplusMoney">账户剩余金额：￥</text>
					<text class="surplusnum">{{surplusnum}}</text>
				</view>
				<view class="withdrawalBox">
					<text class="withdrawalFont">提现金额:</text>
					<text class="withdrawalmoney">￥{{withdrawalmoney}}</text>
				</view>
			</view>
			<text class="framea"></text>
			<text class="withdrawalMethod">提现方式<text class="symbolxin">*</text></text>
			<view class="methodBox">
				<view @click="wxbut" :class="wxstyle">
					<image class="wximg" :src="wximg"></image>
					微信
				</view>
				<view @click="zfbbut" :class="zfbstyle">
					<image class="zfbimg" :src="zfbimg"></image>
					支付宝
				</view>
				<view @click="yinlianbut" :class="yinlianstyle">
					<image class="yinlianimg" :src="yinlianimg"></image>
					银联
				</view>
			</view>
			<text class="frameb"></text>
			<text class="tixianmethod">{{tixianmethod}}<text class="symbolxin">*</text> </text>
			<view v-show="wxisShow" class="wxinfoBox">
				<view class="infoBox">
					<text class="name">姓&nbsp&nbsp&nbsp名</text>
					<input class="inputname" type="text" placeholder="请输入正确的姓名" />
				</view>
				<view class="infoBox">
					<text class="name">账&nbsp&nbsp&nbsp号</text>
					<input class="inputname" type="text" placeholder="请输入正确的微信账号" />
				</view>
			</view>
			<view v-show="zfbisShow" class="wxinfoBox">
				<view class="infoBox">
					<text class="name">姓&nbsp&nbsp&nbsp名</text>
					<input class="inputname" type="text" placeholder="请输入正确的姓名" />
				</view>
				<view class="infoBox">
					<text class="name">账&nbsp&nbsp&nbsp号</text>
					<input class="inputname" type="text" placeholder="请输入正确的支付宝账号" />
				</view>
			</view>
			<view v-show="ylisShow" class="wxinfoBox">
				<view class="infoBox">
					<text class="name">姓&nbsp&nbsp&nbsp名</text>
					<input class="inputname" type="text" placeholder="请输入正确的姓名" />
				</view>
				<view class="infoBox">
					<text class="name">开户行</text>
					<input class="inputname" type="text" placeholder="请输入正确的银行名称" />
				</view>
				<view class="infoBox">
					<text class="name">账&nbsp&nbsp&nbsp号</text>
					<input class="inputname" type="text" placeholder="请输入正确的银行卡账号" />
				</view>
			</view>
		</view>
		<view class="submit">
			提交申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxisShow: true,
				zfbisShow: false,
				ylisShow: false,
				tixianmethod: '微信提现',
				surplusnum: '864.32',
				withdrawalmoney: '860.00',
				wximg: '../../../static/user2/wxliang.png',
				zfbimg: '../../../static/user2/zfban.png',
				yinlianimg: '../../../static/user2/yinlianan.png',
				wxstyle: 'wxboxa',
				zfbstyle: 'zfbbox',
				yinlianstyle: 'yinlianbox'
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			wxbut() {
				this.wxstyle = 'wxboxa';
				this.zfbstyle = 'zfbbox';
				this.yinlianstyle = 'yinlianbox';
				this.wximg = '../../../static/user2/wxliang.png';
				this.zfbimg = '../../../static/user2/zfban.png';
				this.yinlianimg = '../../../static/user2/yinlianan.png';
				this.tixianmethod = "微信提现";
				this.wxisShowtrue = true;
				this.zfbisShow=false;
				this.ylisShow=false;
			},
			zfbbut() {
				this.wxstyle = 'wxbox';
				this.zfbstyle = 'zfbboxa';
				this.yinlianstyle = 'yinlianbox';
				this.wximg = '../../../static/user2/wxan.png';
				this.zfbimg = '../../../static/user2/zfbliang.png';
				this.yinlianimg = '../../../static/user2/yinlianan.png';
				this.tixianmethod = "支付宝提现";
				this.wxisShowtrue = false;
				this.zfbisShow=true;
				this.ylisShow=false;
			},
			yinlianbut() {
				this.wxstyle = 'wxbox';
				this.zfbstyle = 'zfbbox';
				this.yinlianstyle = 'yinlianboxa';
				this.wximg = '../../../static/user2/wxan.png';
				this.zfbimg = '../../../static/user2/zfban.png';
				this.yinlianimg = '../../../static/user2/yinlianliang.png';
				this.tixianmethod = "银联提现";
				this.wxisShowtrue = false;
				this.zfbisShow=false;
				this.ylisShow=true;
			}
		}
	}
</script>

<style lang="scss">

	.main {
		width: 750rpx;
		height: 1000rpx;
		position: relative;
		top: 0rpx;
	}

	.frame {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
		position: absolute;
		top: 30rpx;
		left: 20rpx;
	}

	.amount {
		font-size: 28rpx;
		color: #2E2E2E;
		position: absolute;
		top: 25rpx;
		left: 40rpx;
	}

	.symbolxin {
		font-size: 28rpx;
		color: #7322D8;
	}

	.moneyBox {
		width: 710rpx;
		height: 163rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		top: 90rpx;
		left: 20rpx;
	}

	.surplusBox {
		width: 670rpx;
		height: 70rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.surplusMoney {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.surplusnum {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.withdrawalBox {
		width: 670rpx;
		height: 90rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.withdrawalFont {
		font-size: 34rpx;
		color: #333333;
	}

	.withdrawalmoney {
		font-size: 34rpx;
		color: #FF3B30;
	}

	.framea {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
		position: absolute;
		top: 290rpx;
		left: 20rpx;
	}

	.withdrawalMethod {
		font-size: 28rpx;
		color: #2E2E2E;
		position: absolute;
		top: 285rpx;
		left: 40rpx;
	}

	.methodBox {
		width: 710rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		position: relative;
		top: 185rpx;
		left: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.wxbox {
		width: 170rpx;
		height: 61rpx;
		border: 2rpx solid rgba(142, 142, 142, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
	}

	.wxboxa {
		width: 170rpx;
		height: 61rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.wximg {
		width: 40rpx;
		height: 34rpx;
		position: relative;
		left: -10rpx;
	}

	.zfbbox {
		width: 190rpx;
		height: 60rpx;
		border: 2rpx solid rgba(142, 142, 142, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
	}

	.zfbboxa {
		width: 190rpx;
		height: 60rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.zfbimg {
		width: 38rpx;
		height: 28rpx;
		position: relative;
		left: -10rpx;
	}

	.yinlianbox {
		width: 170rpx;
		height: 61rpx;
		border: 2rpx solid rgba(142, 142, 142, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
	}

	.yinlianboxa {
		width: 170rpx;
		height: 61rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.yinlianimg {
		width: 37rpx;
		height: 24rpx;
		position: relative;
		left: -10rpx;
	}

	.frameb {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
		position: absolute;
		top: 500rpx;
		left: 20rpx;
	}

	.tixianmethod {
		font-size: 28rpx;
		color: #2E2E2E;
		position: absolute;
		top: 495rpx;
		left: 40rpx;
	}

	.wxinfoBox {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		bottom: 0rpx;
	}

	.infoBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.inputname {
		font-size: 28rpx;
		position: absolute;
		left: 155rpx;
	}
	.submit{
		width:710rpx;
		height:90rpx;
		background:rgba(115,34,216,1);
		box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		border-radius:20rpx;
		font-size:38rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 30rpx;
		left: 20rpx;
		}
</style>
